<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
            <style type="text/css">
                p.dotted {
                    border-style: dotted;
                    outline-style: dotted;
                    outline-color:#00ff00;
                }
                p.dashed {
                    border-style: dashed;
                    border-color: green;
                    outline-style: dashed;
                    outline-color: yellow;
                }
                p.solid {
                    border-style: solid;
                    outline-style: solid;
                    outline-width: thick;
                    outline-offset: 10px;
                }
                p.double {border-style: double}
                p.groove {border-style: groove}
                p.ridge {border-style: ridge}
                p.inset {border-style: inset}
                p.outset {border-style: outset}
                p{
                    margin: 1.5em;
                }
            </style>
</head>
<body>

<div class="container">
        <div style="font-size: 2em;color: red">边框可以单独定义4方向的边框</div>
    <div class="row">
        <p style="border-left-style: ridge">单独定义左边框</p>
        <p style="border-top-style: ridge;border-top-color: yellow">单独定义上边框</p>
    </div>

    <div style="font-size: 2em;color: red">边框,轮廓 用法基本一致(样式，颜色，宽度)</div>
    <div class="row">
        <p class="dotted">A dotted border</p>

        <p class="dashed">A dashed border</p>

        <p class="solid">轮廓offset 15px，向外延伸</p>

        <p class="double">A double border</p>

        <p class="groove">A groove border</p>

        <p class="ridge">A ridge border</p>

        <p class="inset">An inset border</p>

        <p class="outset">An outset border</p>
</div>
</div>

</body>
</html>